<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery3.3.1.js"></script>
</head>
<body>
    <div id="box">id选择器</div>
    <div class="ele">class选择器</div>
    <p>p标签</p>
    <script>
        // var obox=document.getElementById('box');
        // obox.style.background="red";
        // obox.style.border="5px solid green";

        // $("#box").css("background","blue");
        // $("#box").css("border","5px solid green");
        // $("#box").css({
        //     'width':100,
        //     'height':100,
        //     "background":"blue",
        //     "transform":"rotate(30deg)",
        //     "transition":"5s"
        // })

        // $(".ele").css({
        //     'width':100,
        //     'height':100,
        //     "background":"blue",
        //     "transform":"rotate(30deg)",
        //     "transition":"5s"
        // })

        // $("p").css({
        //     'width':100,
        //     'height':100,
        //     "background":"blue",
        //     "transform":"rotate(30deg)",
        //     "transition":"5s"
        // })

        // $("*").css({
        //     'width':100,
        //     'height':100,
        //     "background":"blue",
        //     "transform":"rotate(30deg)",
        //     "transition":"5s"
        // })

        $(".ele,#box,p").css({
            'width':100,
            'height':100,
            "background":"blue",
            "transform":"rotate(30deg)",
            "transition":"5s"
        })
    </script>
</body>
</html>